<template>
  <div>
    <el-dialog :visible.sync="timeVisibleLocal" :before-close="handleClose" top="15%" width="300px"
      :close-on-click-modal="false">
      <template #title>
        <div class="addDataBtnBox" @click="addDataBtn" style="z-index: 999; cursor: pointer">
          <i class="el-icon-check" />
        </div>
        <p class="dialog-title">{{ title }}</p>
      </template>

      <div class="time-box">
        <div class="upload-name-box icon-row">
          <p class="panorama-name">图标：</p>
          <div class="icon-list">
            <img v-for="(icon, index) in templates" :key="index" :src="icon" class="selectable-icon"
              :class="{ selected: selectedIcon === icon }" @click="selectIcon(icon)" />
          </div>
        </div>

        <div class="upload-name-box">
          <p class="panorama-name">数据：</p>
          <button class="btn-sel">选择时间表</button>
          <p class="panorama-name" style="margin-left: 10px;">{{ timeTitle }}</p>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "timeChart",
  data() {
    return {
      timeVisibleLocal: false,
      title: "添加时间表",
      templates: [
        require("../../assets/btn/t1.png"),
        require("../../assets/btn/t2.png"),
        require("../../assets/btn/t3.png"),
        require("../../assets/btn/t4.png"),
      ],
      selectedIcon: "",
      timeTitle: "暂无时间表"
    };
  },
  methods: {
    handleClose() {
      this.timeVisibleLocal = false;
    },
    addDataBtn() {
      console.log("已选图标:", this.selectedIcon);
      // TODO: 后续逻辑
      const timeChartData = {
        icon: this.selectedIcon,
        title: this.timeTitle
      };
      this.$emit("add-time-chart", timeChartData);
      this.timeVisibleLocal = false;
    },
    openTimeDialog() {
      this.timeVisibleLocal = true;
    },
    selectIcon(icon) {
      this.selectedIcon = icon;
    }
  }
};
</script>

<style scoped>
.addDataBtnBox {
  margin-right: 15px;
  position: absolute;
  top: 10px;
  right: 32px;
  cursor: pointer;
}

.dialog-title {
  font-size: 11px;
  color: #ffffff;
}

.time-box {
  width: 100%;
  height: 90px;
}

.upload-name-box {
  margin-top: 10px;
  display: flex;
  font-size: 11px;
  align-items: center;
  color: #fbfbfb;
}

.icon-row {
  align-items: center;
}

.panorama-name {
  margin-right: 10px;
  flex-shrink: 0;
}

.icon-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.selectable-icon {
  width: 30px;
  height: 30px;
  border: 2px solid transparent;
  border-radius: 4px;
  cursor: pointer;
  object-fit: cover;
}

.selectable-icon.selected {
  border-color: #409EFF;
}

.btn-sel {
  font-size: 11px;
}
</style>
